<template>
	<div class="page-content">
		<div class="page-title">请选择视口方向
		<div class="page-timer"><Timer  title="选择视口方向"></Timer></div>
		</div>
		<div style="height: 824px;"  @mousedown="clickCarType">
			<div style="height: 290px;display: flex;justify-content: center;align-items: flex-end;">
				 <button class="top size_wh" data-car='上'></button>
			</div>
			<div style="height: 280px;display: flex;justify-content: center;align-items: center;">
				<button class="left size_hw" data-car='左'></button>
				<button class="invisibility" data-car='看不清' style="height: 220px;width: 280px;"></button>
				<button class="right size_hw" data-car='右' ></button>
			</div>
			<div style="height:200px px;display: flex;justify-content: center;align-items: flex-start;">
				<button class="bottom size_wh" data-car='下'></button>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				carTypes:'',
				buttons:[]
			}
		},
		methods:{
			clickCarType(event){
				let btn = event.target;
				if(btn.tagName.toLowerCase() != 'button')
					btn = event.target.parentElement;
				
				if(btn.tagName.toLowerCase() != 'button')
					return;
				
				this.buttons.forEach((button)=>{
					button.classList.remove('active');
				})
				this.buttons.length = 0;
				btn.classList.add('active');
				this.buttons.push(btn);
				let num = btn.getAttribute('data-car');
				if(num){
					this.carTypes = num;
					console.log("选择: " + num);
				} 
			},
		}
	}
</script>

<style scoped="scoped">
	.size_wh{
		height: 240px;width: 380px;
	}
	.size_hw{
		width: 240px;height: 380px;
	}
	.top{
		background-image: url(../../../public/res/sight/上.png);
		/* background-size: 100%; */
		background-repeat: no-repeat;
		background-position: bottom;
		border: none;
	}
	.top.active{
		background-image: url(../../../public/res/sight/上按下.png);
		/* background-size: 100%; */
		background-repeat: no-repeat;
		background-position: bottom;
		border: none;
	}
	.left{
		background-image: url(../../../public/res/sight/左.png);
		/* background-size: 100%; */
		background-repeat: no-repeat;
		background-position: bottom;
		border: none;
	}
	.left.active{
		background-image: url(../../../public/res/sight/左按下.png);
		/* background-size: 100%; */
		background-repeat: no-repeat;
		background-position: bottom;
		border: none;
	}
	.right{
		background-image: url(../../../public/res/sight/右.png);
		/* background-size: 100%; */
		background-repeat: no-repeat;
		background-position: bottom;
		border: none;
	}
	.right.active{
		background-image: url(../../../public/res/sight/右按下.png);
		/* background-size: 100%; */
		background-repeat: no-repeat;
		background-position: bottom;
		border: none;
	}
	.bottom{
		background-image: url(../../../public/res/sight/下.png);
		/* background-size: 100%; */
		background-repeat: no-repeat;
		background-position: bottom;
		border: none;
	}
	.bottom.active{
		background-image: url(../../../public/res/sight/下按下.png);
		/* background-size: 100%; */
		background-repeat: no-repeat;
		background-position: bottom;
		border: none;
	}
	.invisibility{
		background-image: url(../../../public/res/sight/看不清.png);
		background-size: 200px;
		background-repeat: no-repeat;
		background-position: center;
		border: none;
	}
	.invisibility.active{
		background-image: url(../../../public/res/sight/看不清按下.png);
		background-size: 200px;
		background-repeat: no-repeat;
		background-position: center;
		border: none;
	}
</style>
